$(document).ready(function(){





var addNewBlog = $('.div_3_of_4').find('.add-new');
var outputBlog = '<div class="rp-blog-wrapper">';
		outputBlog += '<h2 class="rp-blog-title">';
			outputBlog +=  '<span class="orig"></span>';
			outputBlog += '<input type="text" class=" rp-edit-title" name="" id="" value="">';
		outputBlog += '</h2>';
		outputBlog += '<p class="rp-blog-subject">';
			outputBlog +=  '<span class="orig"></span>';
			outputBlog += '<textarea class=" rp-edit-blog-content" style="width:100%;"></textarea>';
		outputBlog += '</p>';
		outputBlog += '<ul>';
		outputBlog += 	'<li class="button edit-btn">Edit</li>';
		outputBlog += 	'<li class="button del-btn">Delete</li>';
		outputBlog += '</ul>';
		/*outputBlog += '<div class="button edit-btn">Edit</div>';
		outputBlog += '<div class="button del-btn">Delete</div>';*/	
	outputBlog += '</div>';		
	//console.log(addNewBlog)

	addNewBlog.on('click', function(){ 

		var outputBlogrender = $(outputBlog);
		$(this).parents('.div_3_of_4').append(outputBlogrender);
		
		var edBtn = outputBlogrender.find('.rp-blog-subject').next();
		var delBtn = outputBlogrender.find('.edit-btn').next();
		
		var Edit = false;

		 //initial hiding
		 $('.rp-blog-wrapper').find('.rp-blog-title').children().next().attr('show', 'false').hide();
		 $('.rp-blog-wrapper').find('.rp-blog-subject').children().next().attr('show', 'false').hide();
		

		edBtn.on('click', function(event){
		

			//showing / hiding editable forms
			if (Edit === false) {
				
				
				//showing editable blog title
				$(this).parents('.rp-blog-wrapper').find('.rp-blog-title').children().next().attr('show', 'true').show();
				//showing editable content area
				$(this).parents('.rp-blog-wrapper').find('.rp-blog-subject').children().next().attr('show', 'true').show();

				$(this).children().eq(0).text('Done');
				Edit = true;
			}else{

				//hiding editable blog title	
				$(this).parents('.rp-blog-wrapper').find('.rp-blog-title').children().next().attr('show', 'false').hide();
				//showing editable content area	
				$(this).parents('.rp-blog-wrapper').find('.rp-blog-subject').children().next().attr('show', 'false').hide();
				
				//getting the value of inputs
				var title = $(this).parents('.rp-blog-wrapper').find('.rp-blog-title').children().next().val();
				var cont = $(this).parents('.rp-blog-wrapper').find('.rp-blog-subject').children().next().val();
				$(this).children().eq(0).text('Edit');
				Edit = false;

			};
			
			$(this).parents('.rp-blog-wrapper').find('.rp-blog-title').children().text(title);
			$(this).parents('.rp-blog-wrapper').find('.rp-blog-subject').children().text(cont);
			

		});


		delBtn.on('click', function(){
			modal.open({content: $("<p>Are you sure you want to delete this blog?</p>"), width: "500px", height: "200px"});
			$(this).parents('.rp-blog-wrapper').animate({
				opacity:0
			}, function(){
				$(this).remove();
			});

		});

	});

});